<template>
  <view class="dashboard-container">
    <!-- 状态栏占位符 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 背景装饰元素 -->
    <view class="bg-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
    </view>
    
    <!-- 顶部标题栏 -->
    <view class="header">
      <text class="title">应用</text>
    </view>
    
    <!-- 系统入口卡片 -->
    <view class="systems-grid">
      <view 
        class="system-card" 
        v-for="(system, index) in systems" 
        :key="index" 
        @tap="navigateToSystem(system)" 
        :style="{ animationDelay: index * 0.1 + 's' }"
        :class="{ 'last-used': system.id === lastUsedSystemId }"
      >
        <view class="card-icon" :style="{ backgroundColor: system.bgColor }">
          <text class="icon">{{ system.icon }}</text>
        </view>
        <view class="card-info">
          <text class="system-name">{{ system.name }}</text>
          <text class="system-desc">{{ system.description }}</text>
          <text v-if="system.id === lastUsedSystemId" class="last-used-badge">上次使用</text>
        </view>
        <view class="card-arrow">
          <text class="arrow-icon">→</text>
        </view>
      </view>
    </view>
    
    <!-- 功能提示区 -->
    <view class="features-hint">
      <view class="feature-hint-item">
        <text class="hint-icon">🔄</text>
        <text class="hint-text">实时同步</text>
      </view>
      <view class="feature-hint-item">
        <text class="hint-icon">🔒</text>
        <text class="hint-text">数据安全</text>
      </view>
      <view class="feature-hint-item">
        <text class="hint-icon">⚡</text>
        <text class="hint-text">高效便捷</text>
      </view>
    </view>
    
    <!-- 底部信息区 -->
    <view class="footer">
      <text class="footer-text">选择您需要的服务进行操作</text>
      <text class="version">版本 1.0.0</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';

// 获取应用实例
const app = getApp();
const { proxy } = getCurrentInstance();

// 状态栏高度
const statusBarHeight = ref(20);

// 最后使用的系统ID
const lastUsedSystemId = ref(null);

// 系统数据
const systems = ref([
  {
    id: 'accounting',
    name: '壹成记账',
    description: '智能记账管理，轻松掌控财务',
    icon: '💰',
    bgColor: '#4CAF50',
    route: '/moneyManage/index/index'
  },
  // {    
  //   id: 'mom',    
  //   name: '壹妈',    
  //   description: '贴心母婴助手，成长好帮手',    
  //   icon: '👨‍👩‍👧',    
  //   bgColor: '#FF9800',    
  //   route: '/auntMom/pages/home/home'  
  // }
]);

// 获取状态栏高度和上次使用的系统
onMounted(() => {
  // 获取状态栏高度
  uni.getSystemInfo({
    success: (res) => {
      statusBarHeight.value = res.statusBarHeight;
    }
  });
  
  // 获取上次使用的系统
  const lastSystem = uni.getStorageSync('lastUsedSystem');
  if (lastSystem) {
    lastUsedSystemId.value = lastSystem;
  }
});

// 跳转到对应系统
const navigateToSystem = (system) => {
  // 设置当前系统
  if (app.globalData) {
    app.globalData.currentSystem = system.id;
  }
  
  // 记录最后使用的系统
  lastUsedSystemId.value = system.id;
  uni.setStorageSync('lastUsedSystem', system.id);
  
  // 导航到系统页面
  if (system.route) {
    if (system.id === 'accounting' || system.id === 'aiPhoto' || system.id === 'mom' || system.id === 'ecommercePlugin') {
      // 使用navigateTo跳转到子包页面
      uni.navigateTo({
        url: system.route,
        fail: (err) => {
          console.error('导航失败:', err);
          uni.showToast({
            title: '该功能正在开发中',
            icon: 'none'
          });
        }
      });
    } else {
      uni.navigateTo({
        url: system.route,
        fail: () => {
          uni.showToast({
            title: '该功能正在开发中',
            icon: 'none'
          });
        }
      });
    }
  } else {
    uni.showToast({
      title: '该功能正在开发中',
      icon: 'none'
    });
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  min-height: 100vh;
  padding: 0 40rpx 40rpx;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4eaf5 100%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  
  .circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.4;
  }
  
  .circle-1 {
    width: 400rpx;
    height: 400rpx;
    background: linear-gradient(45deg, #4CAF50, #A5D6A7);
    top: -100rpx;
    left: -100rpx;
  }
  
  .circle-2 {
    width: 300rpx;
    height: 300rpx;
    background: linear-gradient(45deg, #2196F3, #90CAF9);
    bottom: 20%;
    right: -100rpx;
  }
  
  .circle-3 {
    width: 200rpx;
    height: 200rpx;
    background: linear-gradient(45deg, #FF9800, #FFCC80);
    bottom: 10%;
    left: 15%;
  }
}

.status-bar {
  width: 100%;
  position: relative;
  z-index: 1;
}

.header {
  text-align: center;
  margin-bottom: 60rpx;
  margin-top: 60rpx;
  position: relative;
  z-index: 1;
  
  .title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    display: block;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #666;
    margin-top: 10rpx;
    display: block;
  }
}

.systems-grid {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  flex: 1;
  position: relative;
  z-index: 1;
}

.system-card {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10rpx);
  border-radius: 20rpx;
  padding: 40rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  animation: slideIn 0.5s ease forwards;
  opacity: 0;
  transform: translateY(20rpx);
  position: relative;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.05);
  }
  
  &.last-used {
    border-left: 8rpx solid #007aff;
    padding-left: 32rpx;
  }
  
  .card-icon {
    width: 120rpx;
    height: 120rpx;
    border-radius: 24rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 30rpx;
    box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.1);
    
    .icon {
      font-size: 60rpx;
    }
  }
  
  .card-info {
    flex: 1;
    position: relative;
    
    .system-name {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 8rpx;
    }
    
    .system-desc {
      font-size: 26rpx;
      color: #999;
      display: block;
    }
    
    .last-used-badge {
      position: absolute;
      right: 0;
      top: 0;
      background-color: #007aff;
      color: #fff;
      font-size: 20rpx;
      padding: 4rpx 12rpx;
      border-radius: 10rpx;
    }
  }
  
  .card-arrow {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .arrow-icon {
      color: #ccc;
      font-size: 32rpx;
    }
  }
}

.features-hint {
  display: flex;
  justify-content: space-around;
  margin-top: 40rpx;
  position: relative;
  z-index: 1;
  
  .feature-hint-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .hint-icon {
      font-size: 36rpx;
      margin-bottom: 8rpx;
    }
    
    .hint-text {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.footer {
  text-align: center;
  margin-top: 60rpx;
  margin-bottom: 40rpx;
  position: relative;
  z-index: 1;
  
  .footer-text {
    font-size: 24rpx;
    color: #999;
    display: block;
    margin-bottom: 10rpx;
  }
  
  .version {
    font-size: 22rpx;
    color: #ccc;
  }
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(20rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 